<template>
  <div class="user">
    <h2 style="background-color: #fff; padding: 20px">用户分析</h2>
    <h3 style="background-color: #fbfbfb; padding: 20px">用户概况</h3>
    <div class="userdata">
      <div class="user-item">
        <p>231</p>
        <span>付款订单</span>
      </div>
      <div class="user-item">
        <p>￥10000.21</p>
        <span>付款金额</span>
      </div>
      <div class="user-item">
        <p>120311</p>
        <span>活跃用户(今日)</span>
      </div>
      <div class="user-item">
        <p>0.53</p>
        <span>转化率</span>
      </div>
      <div class="user-item">
        <p>￥32.00</p>
        <span>客单价</span>
      </div>
      <div class="user-item">
        <p>122</p>
        <span>新增用户(今日)</span>
      </div>
    </div>
    <h3 style="background-color: #fbfbfb; padding: 20px">用户趋势</h3>
    <div
      ref="userDom"
      style="width: 100%; height: 300px; background-color: #fff"
    ></div>
  </div>
</template>
  
<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

let userDom = ref(null);
let userData = ref({
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [
      "11/1",
      "11/2",
      "11/3",
      "11/4",
      "11/5",
      "11/6",
      "11/7",
      "11/8",
      "11/9",
      "11/10",
      "11/11",
      "11/12",
      "11/13",
      "11/14",
      "11/15",
    ],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [
        600, 400, 500, 330, 800, 730, 520, 530, 410, 620, 390, 350, 660, 550,
        570,
      ],
      type: "line",
      areaStyle: {},
    },
  ],
});
onMounted(() => {
  let myuser = echarts.init(userDom.value);
  userData.value && myuser.setOption(userData.value);
});
</script>
<style>
.user {
  width: 100%;
  padding: 20px;
}
.userdata {
  padding-top: 20px;
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
}
.userdata .user-item {
  padding: 20px;
  margin-left: 30px;
}
.userdata .user-item p {
  font-size: 40px;
}
</style>
  